<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成表格</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            text-align: center;
        }

        table {
            border-collapse: collapse;
            border: 1px solid black;
            width: 100%;
            margin: auto;
            margin-top: 50px;
        }


        tbody,
        tr {
            width: 100%;
        }

        td {
            border: 1px solid black;
            height: 50px;
        }
    </style>
</head>

<body>
    <form>
        <label for="row">行</label>
        <input type="text" id="row">
        <label for="col">列</label>
        <input type="text" id="col">
        <input type="button" value="生成" id="btn">
    </form>
    <table>
        <tbody>
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr> -->
        </tbody>
    </table>
</body>
<script>
    let btn = document.getElementById('btn')
    let row = document.getElementById('row');
    let col = document.getElementById('col');
    let tbody = document.querySelector('tbody');

    btn.onclick = () => {
        tbody.innerHTML = '';
        let frg = document.createDocumentFragment();
        for (let i = 0; i < row.value * 1; i++) {
            let tr = document.createElement('tr');
            let fistTd = document.createElement('td');
            fistTd.innerHTML = i + 1;
            tr.appendChild(fistTd);
            if (i % 2 == 0) tr.style.background = 'gray';

            for (let j = 0; j < col.value * 1; j++) {
                let td = document.createElement('td');
                td.innerHTML = `第${i + 1}行,第${j + 1}列`;
                tr.appendChild(td);
            }
            let lastTd = document.createElement('td');
            lastTd.innerHTML = `<a href="###">删除</a>&nbsp;<a href="###">复制</a>`;
            tr.appendChild(lastTd);
            frg.appendChild(tr);
        }
        tbody.appendChild(frg);
    }


    tbody.onclick = e => {
        e = e || window.event;
        let target = e.target || e.scrElement;
        if (target.innerHTML == '删除') {
            target.parentNode.parentNode.remove();
        } else if (target.innerHTML == '复制') {
            let res = target.parentNode.parentNode.cloneNode(true);
            tbody.appendChild(res);
        }
    }
   
</script>

</html>